<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>beatWife</title>
	<link href="images/buttons.css" rel="stylesheet" />
<style>
	body{font-family:Tahoma,Verdana;line-height:1.5;font-size:13px;text-shadow:0 1px #FFF;}
	fieldset{-webkit-border-raidus:5px;-webkit-box-shadow:0 0 3px #ccc;border:1px dashed #EEE;margin:5px auto 15px;width:500px;}
	fieldset legend{font-family: georgia, 'Microsoft JhengHei';font-size: 18px;}
	#avatarSample{float:right;margin:15px;padding:2px;-webkit-box-reflect:below 3px
    -webkit-gradient(linear, left top, left bottom, from(transparent),
    color-stop(0.55, transparent), to(white));margin-bottom:50px;position:relative;}
	#undo_reset{display:none;}
</style>
</head>
<body>
<fieldset>
	<legend>OK,you love your wife, BUT...</legend>
	<img id="avatarSample" src="images/icon_48.png" alt="avatar" title="bite or beat me?" /><br />
	<input type="text" id="avatarURL" value="" /><span id="avatarMsg" style="color:red;display:none;">saved</span><a href="#" id="avatarRestore">restore to firstLove</a><br />
	for example,you can input the bad <del style="text-decoration:line-through">gay</del> guy's photo URL like: http://ooxx.me/me.jpg<br />
	or... just leave the lonely input BLANK ...
</fieldset>
<fieldset>
	<legend>Reset the Count</legend>
	<input type="button" id="reset" value="Reset" class="button" /><a href="#" id="undo_reset" data-icon="♞" class="button blue skew">undo (<span></span>)</a>
</fieldset>
<fieldset>
	<legend>Hide the Count</legend>
	<input type="button" id="hide" value="Hide" class="button" /><input type="button" id="show" value="Show" class="button" />
</fieldset>
<script src="images/jQuery.js"></script>
<script>
	function setAvatarURL(url) {
		localStorage.avatarURL = url;
		$('#avatarURL').val(localStorage.avatarURL);
		$('#avatarMsg').show().fadeOut(2500);
		$('#avatarSample').attr('src', localStorage.avatarURL);
	}
	if (localStorage.beatCountEnabled == 0) {
		$('#show').attr('disabled', '');
		$('#hide').attr('disabled', 'disabled');
	} else {
		$('#show').attr('disabled', 'disabled');
		$('#hide').attr('disabled', '');
	}
	$('#avatarSample').attr('src', localStorage.avatarURL);
	$('#avatarURL').val(localStorage.avatarURL).blur(function() {
		if ($(this).val() == "") {
			setAvatarURL("images/icon_comeOn.png");
			$('#avatarMsg').text('comeOnBaby!');
		} else {
			setAvatarURL($(this).val());
		}
	});
	$('#avatarRestore').click(function() {
		setAvatarURL("images/icon_128.png");
	});
	$('#reset').click(function() {
		$('#undo_reset span').text(localStorage.beatCount);
		localStorage.beatCount = 0;
		chrome.extension.getBackgroundPage().setBadageCount();
		$(this).val('Reseted').attr('disabled','disabled');
		$('#undo_reset').fadeIn();
	});
	$('#undo_reset').click(function() {
		chrome.extension.getBackgroundPage().setBadageCount($('#undo_reset span').text());
		$(this).fadeOut();
		$('#reset').attr('disabled','').val('Reset again?');
	});
	$('#hide').click(function() {
		localStorage.beatCountEnabled = 0;
		$(this).attr('disabled', 'disabled');
		$('#show').attr('disabled', '');
	});
	$('#show').click(function() {
		localStorage.beatCountEnabled = 1;
		$(this).attr('disabled', 'disabled');
		$('#hide').attr('disabled', '');
	});
</script>

</body>
</html>